<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<ul>
    <li v-for="item in list">
        {{item}}
    </li>
</ul>
    <button @click="list.push('蜡笔小新')">添加一个项</button>
    <button @click="list.pop()">删除一个项</button>

</div>
<!--
push()尾部添加
pop()尾部删除
unshift()头部添加
shift()头部删除
splice()删除，添加，替换
sort()排序
reverse()逆序
-->
<script src="../../js/vue.js"></script>
<script>
//
    new Vue({
        el:'#app',
        data:{
            list:['龙猫','名侦探柯南','铠甲勇士刑天','超兽武装']
        },
        watch:{
        //    复杂数据类型，这两个参数没有意义，因为地址没变。
        //    所以复杂类型中，一般不会写这两个参数，因为这两个参数的值是一样的，就算写也只写这一个。
list(newVal,oldVal){
    console.log('数组改变了',newVal,oldVal);
}
        }
    })
</script>
</body>
</html>